import React, { PureComponent, Fragment } from 'react';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  Badge,
  Tag,
  Tabs, 
  Table,
  Icon,
  Modal,
  message,
  Spin,
  Tree,
} from 'antd';
const { TreeNode } = Tree;
const { Option } = Select;
const { TabPane } = Tabs;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};
const FormItem = Form.Item;
// add 张宇
@Form.create()
export default class CustomModal extends PureComponent {

  renderTreeNodes = (data,platform) => {
    const content = [];
    data.map(item => {
      if (item.permissions && item.permissions.length>0) {
        content.push(
          <TreeNode title={item.permission_name} key={item.permission_id} dataRef={item}>
            {this.renderTreeNodes(item.permissions,platform)}
          </TreeNode>
        );
      }else {
        content.push (<TreeNode  title={item.permission_name} key={item.permission_id} dataRef={item} />);
      }
    });
    return content
  }

  onCheck = (checkedKeys,checkNode,platform) => {
    const platformRoleMap = this.props.platformRoleMap ?  this.props.platformRoleMap :{};
    const platformHalfCheckMap = this.props.platformHalfCheckMap ?this.props.platformHalfCheckMap :{};
    platformRoleMap[platform] = [...checkedKeys];
    platformHalfCheckMap[platform] = checkNode.halfCheckedKeys;
    this.props.saveState({
      platformRoleMap : platformRoleMap,
      platformHalfCheckMap : platformHalfCheckMap
    })
  };
 /* getPermssionTree (permiss,platform){
    const content = [];
    content.push(

    )

    return content;
  }*/
  render() {
    const {
      visible,
      modalHandleOk,
      updateData,
      platformData,//平台集合
      loading,
      modalHandleCancel,
      platformPermissMap, // 平台对应角色的集合 { '平台名' : [ {....权限数据}] }
      platformRoleMap,// 平台对应角色的集合 { '平台名' : [ '该角色的功能点', '该角色的功能点', '该角色的功能点', '该角色的功能点'] }
      findPermissByPlatform
    } = this.props;
    const {updateRoleId ,tabNameMap ,checkPlatform}= updateData
    const { form: { getFieldDecorator, resetFields, validateFields, setFieldsValue, getFieldValue } } = this.props
    const { form } = this.props;
//确定
    const onOk = e => {
      e.preventDefault();
      let stringMap ={};
      const platform_formItem = form.getFieldValue("platform");

      for(let i in platform_formItem){
         const platform = platform_formItem[i];
          const halfCheck = this.props.platformHalfCheckMap[platform]?this.props.platformHalfCheckMap[platform]:[];
          const permisson = platformRoleMap[platform].concat(halfCheck);
          for(let i=0; i<permisson.length; i++){
            if(permisson[i] === 'all'){//删除 'all'
              permisson.splice(i,1);
              continue;
            }
          }
          stringMap[platform] = permisson.join(',');
      }

      let subFields = {
        role_id:updateRoleId,
        string_map:stringMap,
        is_left_menu : '1,4',
      }


      modalHandleOk(subFields);
    }
    const handleChange = (value,values)=>{
      findPermissByPlatform(value,updateRoleId);
    }
    const getContentProps = ()=>{
      const content = [

      ];
      if(platformPermissMap){
        for(let platform in platformPermissMap){
            if(platformPermissMap[platform]){
              let permission = platformPermissMap[platform]
              content.push(
                <TabPane tab={tabNameMap[platform]} key={platform+'tabPane'}>
                  <Tree
                    style={{marginLeft : '25px'}}
                    checkable
                    defaultExpandAll={true}
                    onCheck={(checked,checkNode)=>this.onCheck(checked,checkNode,platform)}
                    checkedKeys={platformRoleMap && platformRoleMap[platform] ? platformRoleMap[platform] : []}
                  >
                    <TreeNode title={`全选`} key={`all`} dataRef={``}>
                      {this.renderTreeNodes(permission,platform)}
                    </TreeNode>
                  </Tree>
                </TabPane>
              )
            }else{
              content.push([])
            }
        }
      }
      return content;
    }

    return (
      <Modal
        title='修改权限'
        width={1000}
        visible={visible}
        onOk={onOk}
        onCancel={modalHandleCancel}
      >

        <form layout="inline" >
          <FormItem
            {...formItemLayout}
            label="应用平台"
          >
            {getFieldDecorator('platform', {
              initialValue: checkPlatform ? checkPlatform : undefined,
            })(
              <Select mode="multiple" placeholder="请选择" style={{ width: '250px' }}  onChange={(value,values) => handleChange(value,values)}>
                {platformData && platformData.length > 0
                  ? platformData.map(function (item) {
                    return (
                      <Option key={item.k} id={item.k} value={item.k}>
                        {item.v}
                      </Option>
                    );
                  })
                  : []}
              </Select>
            )}
          </FormItem>
          <Spin spinning={loading}>
            <Tabs >
              {getContentProps ()}
            </Tabs>
          </Spin>

        </form>

      </Modal>
    )
  }
}
